<template>
  <div class="full-screen">
    <div v-if="!isConnect" class="full-screen flex justify-center align-center">
      <van-button color="#EF7A4E" round type="info" @click="qwBluetooth.connect()">搜索智能笔</van-button>
    </div>
    <div v-else class="full-screen flex flex-column">
      <top-bar :title="penName" />
      <div class="flex-1 flex align-center">
        <tql-canvas ref="canvas" id="canvas" :width="width" :height="height" />
      </div>
      <bottom-bar @changeShow="changeShow" />
      <pen-data :show.sync="penDataShow" />
      <offline-sheet :show.sync="offlineSheetShow" />
      <color-sheet :show.sync="colorSheetShow" />
      <width-sheet :show.sync="widthSheetShow" />
      <replay-progress :show.sync="replayProgressShow" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import ReplayProgress from "@/components/mobile/progress/ReplayProgress.vue";
import BottomBar from "../components/mobile/BottomBar.vue";
import TopBar from "../components/mobile/TopBar.vue";
import TqlCanvas from "../components/tql/tql-canvas.vue";
import PenData from "../components/mobile/PenData.vue";
import * as MethodName from "../tqlsdk/MethodName";
import * as DataName from "../utils/dataName";
import FormatDate from "../utils/FormatDate";
import OfflineSheet from "../components/mobile/sheet/OfflineSheet.vue";
import ColorSheet from "../components/mobile/sheet/ColorSheet.vue";
import WidthSheet from "../components/mobile/sheet/WidthSheet.vue";

export default {
  components: {
    TopBar,
    BottomBar,
    TqlCanvas,
    PenData,
    OfflineSheet,
    ColorSheet,
    WidthSheet,
    ReplayProgress,
  },
  data() {
    return {
      replayProgressShow: false,
      widthSheetShow: false,
      colorSheetShow: false,
      offlineSheetShow: false,
      penDataShow: false,
      qwBluetooth: null, // 放入 data 中
    };
  },
  computed: {
    ...mapGetters(["isConnect", "width", "height", "bluetooth", "event"]),
    // 笔名
    penName() {
      return this.$store.state.mobilePenDataList[0].value;
    },
    // 确保 qwBluetooth 是响应式的
    qwBluetoothGetter() {
      return this.qwBluetooth || this.$store.getters.qwBluetooth;
    },
  },
  methods: {
    ...mapActions([
      "connectListener",
      "disconnectListener",
      "penDataListener",
      "setPenDataList",
      "batchSendCommand",
    ]),
    ...mapMutations(["setIsFirst", "setTqlCanvas"]),
    connect(data) {
      console.log(data);
    },
    disconnect(data) {
      console.log(data);
      this.setIsFirst(true);
    },
    handlePenData(data) {
      console.log(data);
      switch (data.operation) {
        case MethodName.F0400:
          this.$toast(`蜂鸣器鸣叫设置${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.A0: //获取蓝牙设备名 - 笔名
          this.setPenDataList({
            label: DataName.BluetoothName,
            value: data.name,
          });
          break;
        case MethodName.A2: //设置蓝牙设备名 - 笔名
          if (data.isSuccess) this.bluetooth.getBluetoothName();
          this.$toast(`设置笔名${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.A4: //获取蓝牙MAC -笔MAC
          this.setPenDataList({
            label: DataName.BluetoothMAC,
            value: data.mac,
          });
          break;
        case MethodName.A6: //获取蓝牙固件版本
          this.setPenDataList({
            label: DataName.BluetoothFirmwareVersion,
            value: data.version,
          });
          break;
        case MethodName.A8: //获取电量 //isCharging
          this.setPenDataList({
            label: DataName.ElectricQuantity,
            value: data.electricQuantity,
          });
          break;
        case MethodName.AA: //获取RTC
          this.setPenDataList({
            label: DataName.RealTimeClock,
            value: FormatDate(data.timestamp),
          });
          break;
        case MethodName.AC: //设置RTC
          if (data.isSuccess) this.bluetooth.getRealTimeClock();
          this.$toast(`校正RTC${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.B0: //获取自动关机时间
          this.setPenDataList({
            label: DataName.AutoShutdownTime,
            value: `${data.time}${data.unit}`,
          });
          break;
        case MethodName.B2: //设置自动关机时间
          if (data.isSuccess) this.bluetooth.getAutoShutdownTime();
          this.$toast(`设置自动关机时间${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.B4: //恢复出厂设置
          this.$toast(`恢复出厂设置${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.B6: //获取Flash占比
          this.setPenDataList({
            label: DataName.FlashProportion,
            value: data.proportion,
          });
          break;
        case MethodName.B8: //获取是否压力唤醒
          this.setPenDataList({
            label: DataName.PressureRouse,
            value: data.isOpen,
          });
          break;
        case MethodName.BA: //设置是否压力唤醒
          if (data.isSuccess) this.bluetooth.getPressureRouse();
          this.$toast(`设置笔尖压力唤醒${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.BC: //获取蜂鸣器是否开启
          this.setPenDataList({
            label: DataName.Buzzer,
            value: data.isOpen,
          });
          break;
        case MethodName.BE: //设置蜂鸣器是否开启
          if (data.isSuccess) this.bluetooth.getBuzzerIsOpen();
          this.$toast(`设置蜂鸣器${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.C0: //获取离线数据量
          // this.setPenDataList({
          //     label: DataName.OfflineDataSize,
          //     value: `${data.size}${data.unit}`
          // })
          break;
        case MethodName.C2_0: //开始离线数据传输
          this.$toast(`开始获取离线数据${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.C2_1: //停止离线数据传输
          this.$toast(`停止获取离线数据${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.CB_0: //暂停离线数据传输
          this.$toast(`暂停获取离线数据${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.CB_1: //继续离线数据传输
          this.$toast(`继续获取离线数据${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.C5: //离线数据传输结束
          this.$toast("离线数据获取完成");
          break;
        case MethodName.C8: //删除离线数据
          this.$toast(`删除离线数据${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.D0: //获取压力敏感度
          this.setPenDataList({
            label: DataName.PressureSensor,
            value: data.sensor,
          });
          break;
        case MethodName.D2: //设置压力敏感度
          if (data.isSuccess) this.bluetooth.getPressureSensor();
          this.$toast(`设置压力敏感度${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.D4: //获取呼吸灯颜色
          this.setPenDataList({
            label: DataName.NotifyLight,
            value: `${data.pressure_20}-${data.pressure_300}`,
          });
          break;
        case MethodName.D6: //设置呼吸灯颜色
          if (data.isSuccess) this.bluetooth.getNotifyLight();
          this.$toast(`设置呼吸灯颜色${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.D8: //获取压力校正值
          this.setPenDataList({
            label: DataName.PressureCorrection,
            value: `${data.pressure_20}-${data.pressure_300}`,
          });
          break;
        case MethodName.DA: //获取MCU版本
          this.setPenDataList({
            label: DataName.MCUFirmwareVersion,
            value: data.version,
          });
          break;
        case MethodName.DC: //获取客户Id
          console.log(data);
          break;
        case MethodName.DE: //设置客户Id
          if (data.isSuccess) this.bluetooth.getCustomerId();
          this.$toast(`设置客户Id${data.isSuccess ? "成功" : "失败"}`);
          break;
        case MethodName.E4: //获取笔的类型
          // this.setPenDataList({
          //     label: DataName.PenType,
          //     value: data.type
          // })
          break;
      }
    },
    // 子件修改父件属性
    changeShow(label, value) {
      if (label === "replayProgressShow") {
        this[label] = !this[label];
        return;
      }
      this[label] = value;
    },
    // 新增方法：搜索智能笔
    searchSmartPen() {
      if (qwBluetooth && typeof qwBluetooth.connect === "function") {
        qwBluetooth.connect();
      } else {
        console.error("qwBluetooth 未正确初始化");
      }
    },
  },
  created() {
    this.connectListener(this.connect);
    this.disconnectListener(this.disconnect);
    this.penDataListener(this.handlePenData);

    // 初始化 qwBluetooth
    this.qwBluetooth = this.$store.getters.qwBluetooth;
  },
};
</script>